<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据库管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/scroll-bar.css">
    <link rel="stylesheet" href="assets/css/sub-page.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_693759_dgsnpaj0hzk.css">
</head>
<body>
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>数据迁移</cite></a>
                <a><cite>数据库管理</cite></a>
            </span>
        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>

    <script type="text/html" id="db-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i
                    class="layui-icon">&#xe654;</i>添加
            </button>
        </div>
    </script>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
    <script type="text/html" id="db-table-bar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
<!--js逻辑-->
<script src="assets/libs/layui/layui.js"></script>
<script>
    layui.config({
        base: 'module/',
        version: true,
        debug: true
    }).use(['element','table', 'form', 'config', 'crown'], function () {
        var config = layui.config;
        var table = layui.table;
        var form = layui.form;
        var crown = layui.crown;

        table.render({
            elem: '#tableId',
            toolbar: '#db-toolbar',
            url: '/db/connections',
            request: config.request,
            parseData: config.parseData,
            response: config.response,
            page: true,
            cols: [[
                {field: 'name', align: 'center', sort: true, title: '账号'},
                {field: 'dbType', align: 'center', sort: true, title: '数据库类型'},
                {field: 'host', align: 'center', sort: true, title: '主机'},
                {field: 'port', align: 'center', sort: true, title: '端口'},
                {field: 'username', align: 'center', sort: true, title: '用户名'},
                {align: 'center', toolbar: '#db-table-bar', title: '操作'}
            ]]
        });

        table.on('toolbar(tableFilter)', function (obj) {
            if (obj.event === 'add') {
                crown.popupCenter({
                    title:  '添加数据库',
                    path: 'pages/database-form.html',
                    finish: function () {

                    }
                });
            }
        });

        table.on('tool(tableFilter)', function (obj) {
            crown.putTempData('t_user', obj.data);
            crown.popupCenter({
                title:  '修改数据库',
                path: 'pages/database-form.html',
                finish: function () {

                }
            });
        });

    })
</script>

</body>
</html>